<template>
  <div v-show="flag">
    <div class="sorter_page">
      <div class="getBack">
        <router-link
          tag="span"
          to="/bookshop"
          class="iconfont icon-zuojiantou"
        ></router-link>
      </div>
      <van-sidebar v-model="activeKey" @change="getStoreRankListFun">
        <van-sidebar-item title="人气榜" />
        <van-sidebar-item title="畅销榜" />
        <van-sidebar-item title="完结榜" />
        <van-sidebar-item title="畅销榜" />
        <van-sidebar-item title="免费榜" />
      </van-sidebar>

      <div class="content" v-for="(item, index) in bookLists" :key="index">
        <div class="item" @click="goDetailFun(item.id, item.title)">
          <div class="img">
            <img :src="item.cover" alt="" />
          </div>
          <div class="right">
            <div class="title">{{ item.title }}</div>
            <div class="introduce">{{ item.content }}</div>
            <div class="author">{{ item.author }} | {{ item.category }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getStoreRankList } from "../api/sorter";
export default {
  data() {
    return {
      num: 0,
      activeKey: 0,
      bookLists: [], //获取书籍列表
      rankType: [34, 26, 800, 804, 806], // 34.人气榜   26.畅销榜  800.新书榜   804.免费榜  806.完结榜
      flag: false, //loading 加载判断
    };
  },
  methods: {
    getStoreRankListFun() {

      this.$toast.loading({
        message: "加载中...",
        overlay: true,
      });
      this.num = this.rankType[this.activeKey];
      getStoreRankList({
        rankType: this.num,
        uuid: "ca03da7b64ca443ab25ec3b662fa91e2",
        all: 0,
      }).then((data) => {
        console.log(data);
        this.bookLists = data.list;

        if (this.bookLists.length != 0) {
          
          this.$toast.clear();
          this.flag = true;
        }
      });
    },

    // 跳转页面
    goDetailFun(id, title) {
      // 调用vuex存储状态
      this.$store.commit("setBookInfo", { id, title });
      this.$router.push({ name: "introduce" });
    },
  },
  created() {
    //   let detailsInfo = this.$store.state.bookInfo;
    let sorterInfo = this.$store.state.sorterInfo;
    this.activeKey = sorterInfo;
    this.getStoreRankListFun();
  },
};
</script>

<style lang="less">
.sorter_page {
  padding-top: 30px;
  background-color: #f7f8fa;
  .getBack {
    width: 100%;
    height: 18px;
    padding-left: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #f7f8fa;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 4;
    span {
      font-size: 18px;
      line-height: 18px;
    }
  }
  .van-sidebar {
    width: 20%;
    height: 100vh;
    background-color: #f7f8fa;

    position: fixed;
    left: 0;
  }
  .content {
    float: right;
    width: 80%;
    height: 100%;
    background-color: #f6f6f6;
    padding-left: 10px;
    box-sizing: border-box;
    .item {
      display: flex;
      margin-bottom: 18px;

      .img {
        margin-right: 8px;
        img {
          width: 45px;
          height: 64px;
        }
      }
      .right {
        .title {
          font-size: 15px;
          margin-bottom: 8px;
        }
        .introduce {
          width: 210px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          font-size: 13px;
          line-height: 13px;
          margin-bottom: 8px;
        }
        .author {
          font-size: 13px;
          line-height: 13px;
        }
      }

      &:first-child {
        margin-top: 20px;
      }
    }
  }
}
</style>